import React from "react";
import { Modal } from "antd";

// @ts-ignore
import * as PANOLENS from "panolens";
import { useState } from "react";
import { InfoSpotItem } from "@/pages/map/infospot/data";
PANOLENS.Viewer.prototype.getPosition = function () {
    var intersects, point, panoramaWorldPosition, outputPosition;
    intersects = this.raycaster.intersectObject(this.panorama, true);

    if (intersects.length > 0) {
        point = intersects[0].point;
        panoramaWorldPosition = this.panorama.getWorldPosition();

        // Panorama is scaled -1 on X axis
        outputPosition = [
            -(point.x - panoramaWorldPosition.x).toFixed(2),
            (point.y - panoramaWorldPosition.y).toFixed(2),
            (point.z - panoramaWorldPosition.z).toFixed(2)
        ];
    }

    return outputPosition;
};



const Panolens: React.FC<{
    url: string,
    infoSpot: InfoSpotItem[], container: string, onChange?: (value: Array<string | Number>) => void, value?: string, type?: number
}> = ({ url, infoSpot, container, onChange = () => { }, value, type = 1 }) => {
    let viewerMap: any = {};

    const [createQrVisible, handleQrVisible] = useState<boolean>(false);
    let createPanorama = () => {

        var viewer = new PANOLENS.Viewer({
            container: document.querySelector(`#${container}`),
            controlButtons: ['fullscreen'],
            cameraFov: 60,
            // autoRotate: true, //自动播放
            autoRotateActivationDuration: 2000, //时长
            autoRotateSpeed: 0.1, //速度
            autoHideInfospot: false,
        });
        viewerMap[container] = viewer

        const panorama = new PANOLENS.ImagePanorama(url + '?x-oss-process=style/img_vague');
        infoSpot.forEach((item: any, index: number) => {
            // 排除已禁用节点
            // if (item.status !== 1) {
            //     return
            // }
            let temp = item?.to_panorama_id ? `https://ghwl.oss-cn-hangzhou.aliyuncs.com/product/permanent/2023-09-13/6440253c819e494c872f20c21ccf283ePvA__1233.png?v=${index}` : `https://ghwl.oss-cn-hangzhou.aliyuncs.com/product/permanent/2023-09-13/ed8bc8b22bdc4b6d80f0ccabebbbd38bVVe__233.png?v=${index}`
            const infospot = new PANOLENS.Infospot(300 + index, temp)
            infospot.addHoverText(item.name + (item.status !== 1 ? '(已禁用)' : ''))
            infospot.position.set(...item.coordinates)
            panorama.add(infospot)
        })
        viewer.add(panorama);
        if (type == 2) {
            console.log(value);

            if (value && Array.isArray(value)) {
                viewer.camera.position.set(...value)
            }
        }
        viewer.setPanorama(panorama);
        // console.log(viewer.getPosition());
        panorama.addEventListener("click", function () {
            // 获取位置点
            if (type == 1) {
                onChange(viewer.getPosition())
                handleQrVisible(false)
            }
            if (type == 2) {
                console.log(viewer.camera.position);
                let position = viewer.camera.position
                onChange([position.x, position.y, position.z])
                handleQrVisible(false)
            }

            // console.log(viewer.getPosition());

        });
    }
    return <>
        <a onClick={() => {
            handleQrVisible(true)
            setTimeout(createPanorama, 100)
        }}> {value ? `X:${value[0]} Y:${value[1]} Z:${value[2]}` : '查看场景'}</a>
        <Modal open={createQrVisible} footer={null} width={type == 1 ? 800 : 450} onCancel={() => handleQrVisible(false)} destroyOnClose>
            <div id={container} style={{ width: type == 1 ? '700px' : '380px', height: '600px' }}>

            </div>
        </Modal>
    </>
}

export default Panolens